<template>
  <a-modal
    title="淘宝CSV上传"
    :visible="visible"
    centered
    :width="800"
    @cancel="closeModel"
    okText="确定"
    :footer="false"
  >
    <a-alert type="warning" style="width: 100%; margin-bottom: 10px">
      <div slot="message" style="font-size: 12px">
        尽量在服务器空闲时间来操作，会占用大量内存与带宽，<span style="color: rgb(254, 167, 86)"
          >在获取过程中，请不要进行任何操作!</span
        >
      </div>
    </a-alert>
    <div style="padding: 10px">
      <span style="color: red">*</span><span class="m_l_5">EXCEL : </span>
      <a-upload
        class="m_l_10"
        :file-list="fileList1"
        :remove="(e) => this.handleRemove(e, 'excel')"
        :before-upload="(e) => this.beforeUpload(e, 'excel')"
      >
        <a-button> <a-icon type="upload" /> 上传 </a-button>
      </a-upload>
    </div>
    <div style="padding: 10px">
      <span style="color: red">*</span><span class="m_l_5">ZIP : </span>
      <a-upload
        class="m_l_10"
        :file-list="fileList2"
        :remove="(e) => this.handleRemove(e, 'zip')"
        :before-upload="(e) => this.beforeUpload(e, 'zip')"
      >
        <a-button> <a-icon type="upload" /> 上传 </a-button>
      </a-upload>
    </div>
    <a-row>
      <a-button
        type="primary"
        :disabled="fileList1.length === 0 || fileList2.length === 0"
        :loading="uploading"
        style="margin-top: 16px"
        @click="handleUpload"
      >
        {{ uploading ? '上传中' : '确认' }}
      </a-button>
    </a-row>
    <a-divider dashed />
    <div style="padding: 0 60px">
      <h2 style="text-align: center">淘宝CSV上传助手</h2>
      <p>功能介绍：可将淘宝助理以及其他途径获取的淘宝商品CSV文件快速上传至商城,节约您的大量时间!</p>
      <a-row>
        <a-col span="3"> 使用方法：</a-col>
        <a-col span="21">
          <ul style="padding-left: 0">
            <li>1.将您获取到的CSV文件转存为Excel格式,否则将无法识别</li>
            <li>2.将配套的图片文件包压缩为Zip格式压缩包并且导入(图片需在压缩包根目录下)</li>
            <li>3.确认上传即可</li>
          </ul>
        </a-col>
      </a-row>
      <p style="color: rgb(217, 83, 79)">注意：导入的商品尽量控制在10个以内</p>
      <div style="text-align: center; padding: 20px">
        <a-button @click="downloadFile('excel')">Excel示例文件</a-button><a-button style="margin-left: 20px"  @click="downloadFile('zip')">Zip示例文件</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { csvUpload } from '@/api/goods/goods'
export default {
  name: 'CSVUploadModal',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    onAfterClose: {
      type: Function,
      default: () => ({}),
    },
  },
  data() {
    return {
      fileList1: [],
      fileList2: [],
      uploading: false,
    }
  },
  created() {},
  mounted() {},
  methods: {
    downloadFile(type){
      // Todo
      if(type == 'excel'){
        window.location.href='https://cyy-desc.oss-cn-beijing.aliyuncs.com/test.xlsx'
      }else{
        window.location.href='https://cyy-desc.oss-cn-beijing.aliyuncs.com/test.zip'
      }
    },
    handleRemove(file, flag) {
      if (flag == 'excel') {
        const index = this.fileList1.indexOf(file)
        const newFileList = this.fileList1.slice()
        newFileList.splice(index, 1)
        this.fileList1 = newFileList
      } else {
        const index = this.fileList2.indexOf(file)
        const newFileList = this.fileList2.slice()
        newFileList.splice(index, 1)
        this.fileList2 = newFileList
      }
    },
    beforeUpload(file, flag) {
      if (flag == 'excel') {
        this.fileList1 = [file]
        return false
      } else {
        this.fileList2 = [file]
        return false
      }
    },
    handleUpload() {
      const formData = new FormData()
      formData.append('excel', this.fileList1[0])
      formData.append('zip', this.fileList2[0])
      this.uploading = true
      csvUpload(formData).then((res) => {
        if (res.code === 0) {
          this.$message.success(res.msg)
          this.fileList1 = []
          this.fileList2 = []
        } else {
          this.$message.error(res.msg)
        }
      })
      this.uploading = false
    },
    handleOk() {
      this.$emit('update:visible', false)
    },
    closeModel() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="less" scoped>
.m_l_5 {
  margin-left: 5px;
}
.m_l_10 {
  margin-left: 10px;
}
/deep/.ant-modal-header {
  border-bottom: none;
}
/deep/.ant-modal-footer {
  border-top: none;
}
/deep/.ant-alert-warning {
  background-color: #fff;
}
</style>
